<template>
  <el-card>
    <el-button size="mini" @click="$router.go(-1)">返回上一页</el-button>
    <el-row type="flex" justify="center" style="margin-bottom: 20px"><strong>{{
      query.type === "edit"
        ? "编辑商品"
        : query.type === "putOn"
          ? "上架商品"
          : "发布商品"
    }}</strong></el-row>
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品类别" prop="classificationId">
            <el-select v-model="form.classificationId" placeholder="请选择商品类别" style="width: 100%">
              <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品分组" prop="groupList">
            <el-select v-model="form.groupList" placeholder="请选择商品分组" style="width: 100%">
              <el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品参数" prop="productAttributes">
            <el-button style="width: 100%" type="primary" @click="dialogTableVisible = true"
              size="small">添加产品参数</el-button>
            <el-row v-for="(item, index) in paramsData" :key="index">
              {{ item.paramsName }}-{{ item.paramsValue }}
            </el-row>
          </el-form-item>
          <el-form-item label="商品图片(6)" prop="picUrl">
            <Upload :value="form.temPicUrl" @onChange="onChange" :limit="6" />
          </el-form-item>
          <el-form-item label="商品详情图片(8)" prop="picDetailUrl">
            <Upload :value="form.temPicDetailUrl" @onChange="onDetailChange" :limit="8" />
          </el-form-item>
          <el-form-item label="是否包邮" prop="logisticsCosts">
            <el-radio-group v-model="form.postage">
              <el-radio :label="1">包邮</el-radio>
              <el-radio :label="0">不包邮</el-radio>
            </el-radio-group>
            <el-row v-if="form.postage === 0" type="flex" :gutter="20">
              <el-input-number v-model="form.logisticsCosts" :controls="false" placeholder="请输入邮费" :min="1"
                style="width: 30%" label="邮费">
              </el-input-number>
              <span style="margin-left: 5px">元</span>
            </el-row>
          </el-form-item>
          <el-form-item label="开售时间" prop="saleWay">
            <el-radio-group v-model="form.saleWay">
              <!-- <el-radio :label="1">手动上架 </el-radio> -->
              <el-radio :label="2">审核后立即上架</el-radio>
              <!-- <el-radio :label="3">定时开售</el-radio> -->
            </el-radio-group>
            <el-row v-if="form.saleWay === 3" type="flex" style="margin-top: 10px">
              <span style="margin-right: 5px">开售时间</span>
              <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-row>
          </el-form-item>
          <!-- <el-form-item label="是否支持七天无理由">
                        <el-switch v-model="form.isSevenBack" active-text="是" inactive-text="否"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否支持正品保障">
                        <el-switch v-model="form.isGenuine" active-text="是" inactive-text="否"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否有运费险">
                        <el-switch v-model="form.isFreightInsurance" active-text="是" inactive-text="否"></el-switch>
                    </el-form-item> -->
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品简介" prop="intro">
            <el-input type="textarea" :rows="2" show-word-limit maxlength="200" :autosize="{ minRows: 2 }"
              v-model="form.intro" placeholder="请输入商品简介"></el-input>
          </el-form-item>
          <el-form-item label="规格图片(1)" prop="specPicUrl">
            <Upload :value="form.temSpecPicUrl" @onChange="onSpecChange" :limit="1" />
          </el-form-item>
          <el-form-item label="份量单位" prop="measure">
            <el-input v-model="form.measure" placeholder="如:瓶、件、份等"></el-input>
          </el-form-item>
          <el-form-item label="形状" prop="exterior">
            <el-input v-model="form.exterior" placeholder="如:颜色、xxl、500ml等"></el-input>
          </el-form-item>
          <el-form-item label="重量" prop="weight">
            <el-input-number v-model="form.weight" :precision="2" :controls="false" placeholder="请输入重量"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="原价" prop="money">
            <el-input-number v-model="form.money" :precision="2" :controls="false" placeholder="请输入原价"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="优惠价" prop="discountPrice">
            <el-input-number v-model="form.discountPrice" :precision="2" :controls="false" placeholder="请输入优惠价"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="库存" prop="num">
            <el-input-number v-model="form.num" :controls="false" placeholder="请输入库存" :min="1"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="添加多规格" prop="stockList">
            <el-button type="primary" style="width: 100%" size="small" @click="handleSpecVisible">添加多规格</el-button>
          </el-form-item>
          <el-form-item label="发货时间" prop="deliveryTime">
            <el-radio-group v-model="form.deliveryTime">
              <el-radio :label="1">当天发货</el-radio>
              <!-- <el-radio :label="2">24小时发货</el-radio>
                            <el-radio :label="3">48小时发货</el-radio>
                            <el-radio :label="4" style="margin-top: 30px;">买家付款后N天发货</el-radio>
                            <el-radio :label="5" style="margin-top: 30px;">定时预售</el-radio> -->
            </el-radio-group>
            <el-row v-if="[4, 5].includes(form.deliveryTime)" type="flex" style="margin-top: 10px">
              <template v-if="form.deliveryTime === 4">
                <span style="margin-right: 5px">填写天数</span>
                <el-input-number v-model="form.presaleDays" :controls="false" placeholder="请输入天数" :min="1"
                  style="width: 30%">
                </el-input-number>
                <span style="margin-left: 5px">天</span>
              </template>
              <template v-if="form.deliveryTime === 5">
                <span style="margin-right: 5px">设置日期</span>
                <el-date-picker v-model="form.presaleTime" type="date" placeholder="选择日期时间">
                </el-date-picker>
              </template>
            </el-row>
          </el-form-item>
          <!-- <el-form-item label="是否加入帮卖">
                        <el-switch v-model="form.isJoinHelpSale" active-text="是" inactive-text="否"></el-switch>
                    </el-form-item> -->
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="onSubmit" style="width: 100%">立即{{
          query.type === "edit"
            ? "保存"
            : query.type === "putOn"
              ? "上架"
              : "发布"
        }}</el-button>
      </el-row>
    </el-form>
    <!-- 添加产品参数 -->
    <el-dialog title="参数" :show-close="false" :close-on-click-modal="false" :visible.sync="dialogTableVisible">
      <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleAddParams">添加
      </el-button>
      <el-dialog :title="isAdd ? '添加参数' : '编辑参数'" @close="close" :close-on-click-modal="false"
        :visible.sync="innerVisible" append-to-body>
        <el-form :model="paramsForm" ref="paramsForm" :rules="paramsRules" label-width="120px">
          <el-form-item label="商品参数名称" prop="paramsName">
            <el-input placeholder="请输入商品参数名称" v-model="paramsForm.paramsName"></el-input>
          </el-form-item>
          <el-form-item label="商品参数内容" prop="paramsValue">
            <el-input placeholder="请输入商品参数内容" v-model="paramsForm.paramsValue"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small" @click="handleProductParams">确定</el-button>
      </el-dialog>
      <el-table :data="paramsData" border>
        <el-table-column property="paramsName" label="商品参数名称"></el-table-column>
        <el-table-column property="paramsValue" label="商品参数内容"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEditParams(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDeleteParams(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" style="margin-top: 10px"
          @click="handleProductParamsFinish">确定</el-button>
      </el-row>
    </el-dialog>
    <!-- 添加多规格 -->
    <el-dialog title="规格" :show-close="false" :close-on-click-modal="false" :visible.sync="dialogTableVisibleSpec">
      <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleAddSpec">添加
      </el-button>
      <el-dialog :title="isAdd ? '添加规格' : '编辑规格'" @close="close" :visible.sync="innerSpecVisible" append-to-body
        :close-on-click-modal="false">
        <el-form :model="specForm" ref="specForm" :rules="specRules" label-width="120px">
          <el-form-item label="规格图片(1)" prop="picUrl">
            <Upload :value="specForm.temPicUrl" @onChange="onInnerSpecChange" :limit="1" />
          </el-form-item>
          <el-form-item label="份量单位" prop="measure">
            <el-input v-model="specForm.measure" placeholder="如:瓶、件、份等"></el-input>
          </el-form-item>
          <el-form-item label="形状" prop="exterior">
            <el-input v-model="specForm.exterior" placeholder="如:颜色、xxl、500ml等"></el-input>
          </el-form-item>
          <el-form-item label="重量" prop="weight">
            <el-input-number v-model="specForm.weight" :precision="2" :controls="false" placeholder="请输入重量"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="原价" prop="money">
            <el-input-number v-model="specForm.money" :precision="2" :controls="false" placeholder="请输入原价"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="优惠价" prop="discountPrice">
            <el-input-number v-model="specForm.discountPrice" :precision="2" :controls="false" placeholder="请输入优惠价"
              style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="库存" prop="num">
            <el-input-number v-model="specForm.num" :controls="false" placeholder="请输入库存" :min="1"
              style="width: 100%"></el-input-number>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="handleProductSpec">确定</el-button>
        </el-row>
      </el-dialog>
      <el-card v-for="(item, index) in specData" :key="index" style="margin-bottom: 10px">
        <el-row type="flex" align="middle">
          <el-image :src="$imgUrl(item.picUrl)" fit="fill" style="width: 150px; height: 50px"
            :preview-src-list="[$imgUrl(item.picUrl)]"></el-image>
          <div style="margin-left: 10px">
            <span>
              {{ item.exterior }} {{ item.measure }} {{ item.weight }}
              <span style="color: #f56c6c">￥{{ item.discountPrice }}</span></span>
          </div>
          <div style="margin-left: auto">
            <el-button type="primary" size="small" @click="handleEditSpec(index, item)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDeleteSpec(index, item)">删除</el-button>
          </div>
        </el-row>
      </el-card>
      <el-card v-if="specData.length === 0"></el-card>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" style="margin-top: 10px" @click="handleProductSpecFinish">确定</el-button>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from "vuex";
import Upload from "../common/Upload.vue";
import { cloneDeep } from "lodash";
import {
  getCommodityClassification,
  getCommodityGroup,
  addCommodity,
  updateCommodity,
} from "@/api/commodity.js";
import router from "@/router";
const form = {
  name: "", // 商品名称
  classificationId: "", // 商品类别id
  picUrl: "", // 商品图片
  temPicUrl: "", // 临时商品图片
  picDetailUrl: "", // 商品详情图片
  temPicDetailUrl: "", // 临时商品详情图片
  groupList: "", // 商品分组
  intro: "", // 商品简介
  measure: "", // 份量单位
  exterior: "", // 形状
  weight: "", // 重量
  money: "", // 原价
  discountPrice: "", // 优惠价
  num: 1, // 库存
  postage: 1, // 是否包邮
  logisticsCosts: "", // 邮费
  specPicUrl: "", // 规格图片
  temSpecPicUrl: "", // 临时规格图片
  deliveryTime: 1, // 非预售发货时间
  isSevenBack: false, // 是否支持七天无理由
  isGenuine: false, // 是否支持正品保障
  isFreightInsurance: false, // 是否有运费险
  saleWay: 2, // 上架方式 1:手动上架 2:审核后立即上架 3:定时开售
  startTime: "", // 定时开售 => 开售时间
  costPrice: "", // 成本价
  stockList: [], // 规格
  productAttributes: [], // 产品参数名称
  productContent: [], // 产品参数内容
};
const rules = {
  name: [{ required: true, message: "请输入商品名称", trigger: "change" }],
  classificationId: [
    { required: true, message: "请选择商品类别", trigger: "change" },
  ],
  groupList: [{ required: true, message: "请选择商品分组", trigger: "change" }],
  picUrl: [{ required: true, message: "请上传商品图片", trigger: "change" }],
  picDetailUrl: [
    { required: true, message: "请上传商品详情图片", trigger: "change" },
  ],
  // intro: [
  //     { required: true, message: '请输入商品简介', trigger: 'change' }
  // ],
  measure: [{ required: true, message: "请输入份量单位", trigger: "change" }],
  exterior: [{ required: true, message: "请输入形状", trigger: "change" }],
  weight: [{ required: true, message: "请输入重量", trigger: "change" }],
  money: [{ validator: validatorPrice, required: true, trigger: "change" }],
  discountPrice: [
    { validator: validatorPrice, required: true, trigger: "change" },
  ],
  num: [{ required: true, message: "请输入库存", trigger: "change" }],
  logisticsCosts: [{ validator: validatorLogisticsCosts, trigger: "change" }],
  specPicUrl: [
    { required: true, message: "请上传规格图片", trigger: "change" },
  ],
};
function validatorPrice(rule, value, callback) {
  if (value > 0) {
    callback();
  } else {
    callback(new Error("价格必须大于0"));
  }
}
function validatorLogisticsCosts(rule, value, callback) {
  if (this && this.form && this.form.postage === 1) callback();
  if (value > 0) {
    callback();
  } else {
    callback(new Error("物流费用必须大于0"));
  }
}
export default {
  components: {
    Upload,
  },
  data: () => ({
    form: { ...form },
    rules: { ...rules },
    query: {}, // 传递过来的参数
    classOptions: [], // 商品类别
    groupOptions: [], // 商品分组
    dialogTableVisible: false, // 参数弹窗
    innerVisible: false, // 添加参数
    paramsData: [], // 参数
    paramsForm: {},
    paramsRules: {
      paramsName: [
        { required: true, message: "请输入商品参数名称", trigger: "change" },
      ],
      paramsValue: [
        { required: true, message: "请输入商品参数内容", trigger: "change" },
      ],
    },
    dialogTableVisibleSpec: false, // 规格弹窗
    innerSpecVisible: false, // 添加规格
    specData: [
      {
        discountPrice: 14,
        exterior: "形状",
        measure: "份量单位",
        money: 15,
        num: 1,
        picUrl: "static/pic/OtherPic/46735090.jpg",
        temPicUrl: "",
        weight: "重量",
      },
      {
        discountPrice: 14,
        exterior: "形状",
        measure: "份量单位",
        money: 15,
        num: 1,
        picUrl: "static/pic/OtherPic/46735090.jpg",
        temPicUrl: "",
        weight: "重量",
      },
    ], // 规格
    specForm: {
      temPicUrl: "", // 临时规格图片
      picUrl: "", // 规格图片
      measure: "", // 份量单位
      exterior: "", // 形状
      weight: "", // 重量
      money: "", // 原价
      discountPrice: "", // 优惠价
      num: "", // 库存
    },
    specRules: {
      picUrl: [
        { required: true, message: "请上传规格图片", trigger: "change" },
      ],
      measure: [
        { required: true, message: "请输入份量单位", trigger: "change" },
      ],
      exterior: [{ required: true, message: "请输入形状", trigger: "change" }],
      weight: [{ required: true, message: "请输入重量", trigger: "change" }],
      money: [{ validator: validatorPrice, required: true, trigger: "change" }],
      discountPrice: [
        { validator: validatorPrice, required: true, trigger: "change" },
      ],
      num: [{ required: true, message: "请输入库存", trigger: "change" }],
    },
    isAdd: true,
  }),
  computed: {
    ...mapGetters(["shopInfo"]),
  },
  watch: {
    "form.postage"(val) {
      if (val === 1) {
        this.$refs.form.clearValidate(["logisticsCosts"]);
      }
    },
  },
  created() {
    console.log("shopInfo", JSON.parse(JSON.stringify(this.shopInfo)));
    // { type }
    // type: add edit putOn
    this.query = this.$route.query;
    this.shopDetail = JSON.parse(localStorage.getItem("shop"));
    console.log("11111", this.shopDetail);
    if (this.shopDetail) {
      this.getCommodityClassification();
      this.getCommodityGroup();
    }
    if (this.query.type === "edit" || this.query.type === "putOn") {
      this.handleEditPutOn(this.shopInfo);
    }
  },
  methods: {
    // 表单提交
    async onSubmit() {
      const params = this.handleSubmitParams(this.form);
      console.log("Form", JSON.parse(JSON.stringify(params)));
      if (this.form.postage === 1) {
        this.rules.logisticsCosts[0].validator = (rule, value, callback) => {
          if (this.form.postage === 1) callback();
          if (value > 0) {
            callback();
          } else {
            callback(new Error("邮费必须大于1元"));
          }
        };
      }
      await this.$refs.form.validate();
      if (this.query.type === "add") {
        addCommodity(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success(
              `${this.query.type === "add"
                ? "发布"
                : this.query.type === "putOn"
                  ? "上架"
                  : "编辑"
              }成功,等待官方审核`
            );
            this.$router.go(-1);
          }
        });
      } else if (this.query.type === "edit" || this.query.type === "putOn") {
        updateCommodity(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success(
              `${this.query.type === "add"
                ? "发布"
                : this.query.type === "putOn"
                  ? "上架"
                  : "编辑"
              }成功,等待官方审核`
            );
            this.$router.go(-1);
          }
        });
      }
    },
    // 编辑前处理
    handleEditPutOn(shopInfo) {
      if (!Object.keys(shopInfo).length) return router.go(-1);
      this.paramsData = shopInfo.productAttributesName.map((item, index) => {
        return {
          paramsName: item,
          paramsValue: shopInfo.productAttributesValue[index],
        };
      });

      const zero = shopInfo.stockList[0];
      this.form = {
        ...this.form,
        ...shopInfo,
        stockList: shopInfo.stockList,
        weight: zero.weight,
        measure: zero.measure,
        exterior: zero.exterior,
        money: zero.money,
        discountPrice: zero.discountPrice,
        num: zero.num,
        temSpecPicUrl: zero.picUrl,
        temPicDetailUrl: shopInfo.picDetailUrl.join(","),
        temPicUrl: shopInfo.picUrl,
        specPicUrl: zero.picUrl,
        groupList: shopInfo.groupList ? shopInfo.groupList[0] : '',
        postage: shopInfo.logisticsCosts ? 0 : 1,
      };
      this.specData = shopInfo.stockList.map((item) => {
        return {
          ...item,
          temPicUrl: item.picUrl,
        };
      });
    },
    // 表单提交前处理
    handleSubmitParams(params) {
      let temParams = cloneDeep(params);
      temParams = {
        ...temParams,
        logisticsCosts: temParams.postage === 1 ? 0 : temParams.logisticsCosts, // 运费
        // classificationId: temParams.classificationId, // 商品类别
        groupList: [temParams.groupList], // 商品分组
        isSevenBack: temParams.isSevenBack ? 1 : 0, // 7天无理由退货
        isGenuine: temParams.isGenuine ? 1 : 0, // 原装正品
        isFreightInsurance: temParams.isFreightInsurance ? 1 : 0, // 运费保险
        // saleWay: temParams.saleWay, // 上架方式
        // startTime: temParams.startTime, // 开售时间
        isJoinHelpSale: temParams.isJoinHelpSale ? 1 : 0, // 是否加入帮卖
        // helpSalePrice: temParams.helpSalePrice, // 帮卖价
        stockList: temParams.stockList.length
          ? temParams.stockList
          : [
            {
              measure: temParams.measure, // 份量
              exterior: temParams.exterior, // 形状
              weight: temParams.weight, // 重量
              money: temParams.money, // 原价
              discountPrice: temParams.discountPrice, // 优惠价
              num: temParams.num, // 库存
              picUrl: temParams.specPicUrl, // 规格图片
            },
          ], // 规格
        shopId: this.shopDetail.id, // 店铺id
        costPrice: temParams.discountPrice, // 成本价
        price: temParams.discountPrice, // 价格
        type: 1,
      };
      delete temParams.temPicDetailUrl;
      delete temParams.temPicUrl;
      delete temParams.temSpecPicUrl;
      delete temParams.postage;
      return temParams;
    },
    async handleSpecVisible() {
      this.dialogTableVisibleSpec = true;
      this.specData = cloneDeep(this.form.stockList);
      this.$set(this.specData, 0, {
        discountPrice: this.form.discountPrice,
        exterior: this.form.exterior,
        measure: this.form.measure,
        money: this.form.money,
        num: this.form.num,
        picUrl: this.form.specPicUrl,
        temPicUrl: this.form.specPicUrl,
        weight: this.form.weight,
      });
    },
    // 添加多规格
    handleAddSpec() {
      this.specForm = {};
      this.isAdd = true;
      this.innerSpecVisible = true;
      this.$nextTick(() => {
        this.$refs.specForm.clearValidate();
      });
    },
    // 编辑多规格
    handleEditSpec(index, item) {
      this.isAdd = false;
      this.innerSpecVisible = true;
      this.$nextTick(() => {
        this.$refs.specForm.clearValidate();
      });
      this.specForm = JSON.parse(JSON.stringify(item));
      this.specForm.temPicUrl = item.picUrl;
    },
    // 删除多规格
    handleDeleteSpec(index, item) {
      this.specData.splice(index, 1);
    },
    // 内层 添加/编辑规格确定
    async handleProductSpec() {
      console.log(this.specForm);
      await this.$refs.specForm.validate();
      this.innerSpecVisible = false;
      if (this.isAdd) {
        this.specData.push(this.specForm);
      } else {
        this.specData.splice(this.specForm.index, 1, this.specForm);
      }
      this.$nextTick(() => {
        this.specForm = {};
      });
    },
    // 商品规格操作完成
    handleProductSpecFinish() {
      console.log(this.specData);
      if (!this.specData.length) {
        this.form = {
          ...this.form,
          ...this.$options.data().specData,
        };
        this.form.temSpecPicUrl = "";
      }
      console.log(this.form);
      this.dialogTableVisibleSpec = false;
      this.form.stockList = this.specData.map((item) => {
        return {
          exterior: item.exterior,
          measure: item.measure,
          money: item.money,
          num: item.num,
          picUrl: item.picUrl,
          discountPrice: item.discountPrice,
          weight: item.weight,
        };
      });
      // 完成规格操作后外部默认使用第一个
      const zero = this.specData[0];
      if (!zero) return;
      this.form = {
        ...this.form,
        temSpecPicUrl: zero.picUrl,
        specPicUrl: zero.picUrl,
        discountPrice: zero.discountPrice,
        exterior: zero.exterior,
        measure: zero.measure,
        money: zero.money,
        num: zero.num,
        weight: zero.weight,
      };
      this.form.stockList = this.specData;
    },
    // 商品参数操作完成
    handleProductParamsFinish() {
      this.dialogTableVisible = false;
      this.form.productAttributes = this.paramsData.map(
        (item) => item.paramsName
      );
      this.form.productContent = this.paramsData.map(
        (item) => item.paramsValue
      );
    },
    //内层 添加/编辑商品参数确定
    async handleProductParams() {
      await this.$refs.paramsForm.validate();
      if (this.isAdd) {
        this.paramsData.push(this.paramsForm);
      } else {
        this.paramsData.splice(this.paramsForm.index, 1, this.paramsForm);
      }
      this.innerVisible = false;
      this.$nextTick(() => {
        this.paramsForm = {};
      });
    },
    // 添加商品参数
    handleAddParams() {
      this.paramsForm = {};
      this.isAdd = true;
      this.innerVisible = true;
      this.$nextTick(() => {
        this.$refs.paramsForm.clearValidate();
      });
    },
    // 编辑商品参数
    handleEditParams(index, row) {
      // this.$refs.paramsForm.clearValidate()
      this.isAdd = false;
      this.paramsForm = JSON.parse(JSON.stringify(row));
      this.innerVisible = true;
      this.paramsForm.index = index;
    },
    // 删除商品参数
    handleDeleteParams(index, row) {
      this.paramsData.splice(index, 1);
    },
    close() {
      this.paramsForm = {};
      this.specForm = {};
      this.innerVisible = false;
      this.innerSpecVisible = false;
    },
    // 获取商品分组
    getCommodityGroup() {
      const params = {
        shopId: this.shopDetail.id,
      };
      getCommodityGroup(params).then((res) => {
        console.log("11111", res);
        if (!res.data) return;
        const groupList = res.data.map((item) => {
          return {
            id: item.commodityCustomizeGroup.id,
            name: item.commodityCustomizeGroup.name,
          };
        });
        this.groupOptions = groupList;
      });
    },
    // 获取商品类别
    getCommodityClassification() {
      getCommodityClassification(this.shopDetail.shopClassificationId).then(
        (res) => {
          if (!res.data) return;
          this.classOptions = res.data[0].secondList;
        }
      );
    },
    onInnerSpecChange(val) {
      this.specForm.picUrl = val;
      this.$refs.specForm.validateField("picUrl");
    },
    // 规格图片
    onSpecChange(val) {
      this.form.specPicUrl = val;
      this.$refs.form.validateField("specPicUrl");
    },
    // 商品图片
    onChange(val) {
      this.form.picUrl = val;
      this.$refs.form.validateField("picUrl");
    },
    // 商品详情图片
    onDetailChange(val) {
      this.form.picDetailUrl = val;
      this.$refs.form.validateField("picDetailUrl");
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-input__count) {
  line-height: 1;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>